<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>CSS 计数器</title>
		<style>
			body {
				/* 设置计数器的初始值 */
				counter-reset: section;
			}

			h2::before {
				/*
        设置计数器的名称：

        counter-reset - 创建或者重置计数器
        counter-increment - 递增变量

        content - 插入生成的内容
        counter() 或 counters() 函数 - 将计数器的值添加到元素
        */
				counter-increment: section;
				content: '第' counter(section) '章：';
			}
		</style>
	</head>
	<body>
		<h1>CSS 计数器</h1>
		<h2>HTML5</h2>
		<h2>Css3</h2>
		<h2>JavaScript</h2>
	</body>
</html>
